<template>
  <p-card :bordered="false">
    <RenderTitle :title="'技能维护'">
    </RenderTitle>

    <div style="padding-bottom: 10px;">
      <p-upload
        class="fl"
        name="file"
        :action="actionUrl"
        :headers="headers"
        :data="uploadParams"
        accept=".xlsx"
        @change="handleChange"
      >
        <p-button type="primary"> 导入</p-button>
      </p-upload>

      <p-button type="primary" @click="exportHandle" style="margin-left: 10px">导出</p-button>

      <p-button type="primary" @click="showAddModal" style="margin-left: 10px">新增</p-button>
    </div>

    <p-table
      ref="table"
      size="middle"
      bordered
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      @change="handleTableChange"
    >
      <span slot="action" slot-scope="text, record">
        <a @click="handleDelete(record.id)">删除</a>
      </span>
    </p-table>
    <LineSkillListModal ref="lineSkillListModal" :selectedId = 'selectedId' :handleSuccess='handleSuccess'></LineSkillListModal>
  </p-card>
</template>

<script type="text/javascript">
import {
  postAction,
  getAction,
  putAction,
  api,
  deleteAction,
} from "@/api/manage";
import RenderTitle from '@/components/renderTitle'
import LineSkillListModal from './lineSkillListModal.vue'
import { getDictItemsArr } from "@/utils/util";


export default {
  props: {
    selectedId: String,
  },
  data() {
    return {
      actionUrl: api.test + "/mes-manpower/mesHrLineSkillDetail/import",
      uploadParams: {
        lineSkillId: 1,
      },
      /* table加载状态 */
      loading: false,
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "50"],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条";
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      columns: [
        {
          title: "序号",
          dataIndex: "",
          key: "rowIndex",
          width: 60,
          align: "center",
          customRender: (t, r, index) => {
            return parseInt(index) + 1;
          },
        },
        {
          title: "技能代码",
          align: "center",
          dataIndex: "skillCode",
        },
        {
          title: "技能名称",
          align: "center",
          dataIndex: "skillName",
        },
        {
          title: "技能分类",
          align: "center",
          dataIndex: "skillType",
          customRender: (t, r, index) => {
            return this.skillTypeKeys[t];
          },          
        },
        {
          title: "需求人数",
          align: "center",
          dataIndex: "needNumber",
        },
        {
          title: "备注",
          align: "center",
          dataIndex: "daremarkte",
        },
        {
          title: "操作",
          dataIndex: "action",
          align: "center",
          scopedSlots: { customRender: "action" },
        },
      ],
      dataSource: [],
      // 技能分类数字字典
      skillTypeKeys: {},
      url: {
        list: "/mes-manpower/mesHrLineSkillDetail/list",
        import: "/mes-manpower/mesHrLineSkillDetail/import",
        export: "/mes-manpower/mesHrLineSkillDetail/export",
        delete: "/mes-manpower/mesHrLineSkillDetail",
      },
    };
  },

  watch: {
    selectedId(newVal, oldVal) {
      this.loadData();
      this.uploadParams.lineSkillId = newVal;
    },
  },
  mounted() {
    this.getAjaxGetDictItems()
  },
  methods: {


    // 获取数字字典
    getAjaxGetDictItems() {
      const arr = [
        { code: "mes_skill_type", key: "skillTypeKeys" },
      ];
      getDictItemsArr(this, arr);
    },

    loadData() {
      this.loading = true;
      const params = {
        lineSkillId: this.selectedId,
      };
      params.pageNo = this.ipagination.current;
      params.limit = this.ipagination.pageSize;
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          this.dataSource = res.data.records;
          this.ipagination.total = res.data.total;
        }
        if (res.code === 510) {
          this.$message.warning(res.msg);
        }
        this.$nextTick(() => {
          this.loading = false;
        });
      });
    },
    // table 的分页事件
    handleTableChange(pagination, filters, sorter) {
      this.ipagination = pagination;
      this.loadData();
    },
    importHandle() {
      postAction(this.url.import);
    },
    exportHandle() {
      window.open(
        api.test + this.url.export + "?lineSkillId=" + this.selectedId
      );
    },
    handleChange(info) {
      if (info.file.status !== "uploading") {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === "done") {
        this.$message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === "error") {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
    },


    // 显示新增弹窗
    showAddModal(){
      this.$refs.lineSkillListModal.showModal()
    },

    handleSuccess(){
      this.loadData();
    },

    // 删除
    handleDelete(id) {
      deleteAction(`${this.url.delete}/${id}`).then((res) => {
        if (res.success) {
          this.loadData();
          this.$message.success("删除成功");
        } else {
          this.$message.error("删除失败");
        }
      });
    },
  },
  components: {
    LineSkillListModal
  },
};
</script>

<style lang="less" scoped>
</style>
